<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />
		
		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />
		
		<style type="text/css">
			.el-table__body-wrapper {
				max-height: calc(100vh - 80px - 300px);
				overflow-y: auto !important;
			}

			.serverList-wrapper {
				height: 100%;
				box-sizing: border-box;
			}

			.serverList-content-wrapper {
				height: 100%;
				background: #F8F8FF;
				padding: 10px 20px 0px;
				box-sizing: border-box;
			}



			.form-wrapper .button-wrapper {
				padding: 20px 0px;
				border-top: 1px solid #EEEEEE;
			}

			.form-wrapper .button-wrapper .yzButton {
				width: 90px;
				height: 40px;
				background: #FFFFFF;
				border: 1px solid #EEEEEE;
				border-radius: 4px;
				margin-right: 20px;
				color: #999999;
			}

			.form-wrapper .button-wrapper .yzButton.active {
				border: 1px solid #6462F3;
				color: #6462F3;

			}


			.form-wrapper .button-wrapper .yzButton.newServer {
				background: #8987FF;
				color: #FFFFFF;
				cursor: default;
				opacity: 0.8;
			}

			.form-wrapper .button-wrapper .yzButton.newServer.active {
				background: #6462F3;
				color: #FFFFFF;
				cursor: pointer;
				opacity: 1;

			}

			.form-wrapper .el-select {
				width: 90px;
			}
			


			.form-wrapper .el-select .el-input .el-select__caret {
				font-size: 16px;
			}

			.el-table .ServerId {
				font-size: 12px;
				color: #6462F3;
			}

			.el-table .icon {
				margin-left: 10px;
			}

			.popover-title {
				font-weight: bold;
				font-size: 14px;
			}

			.el-form .el-input .el-input__inner {
				height: 28px;
				line-height: 28px;
				color: #333;
			}

			.el-form-item__content {
				display: flex;
				justify-content: flex-end;
			}

			.el-button {
				padding: 10px 20px;
			}

			.el-table .opearButton {
				color: #999;
			}

			.el-table .opearButton.active {
				cursor: pointer;
				color: #6462F3;
			}

			.el-table__body tr.current-row>td {
				background: #EFEFFD !important;
			}

			.el-select-dropdown__item.noClick.hover,
			.el-select-dropdown__item.noClick {
				background: none !important;
				color: #999999;
				cursor: default;
			}
			
			.yz-el-dialog  .renewButton {
				/* padding: 11px  20px; */
				display: flex;
				align-items: center;
				justify-content: center;
				width: 76px;
				height: 36px;
				box-sizing: border-box;
				color: #333;
				position: relative;
			}
			
			.yz-el-dialog  .renewButton.active {
				border: 1px solid #6462F3;
				color: #6462F3;

			}
			.yz-tooltip {
				    position: absolute;
				    left: -10px;
				    top: -44px;
				    padding: 8px 14px;
				    font-size: 12px;
			}
			.yz-tooltip::before {
    content: '';
    position: absolute;
    left: 20px;
    bottom: -15px;
    width: 0;
    height: 0;
    border: 8px solid;
    border-color: #ffe5e7 transparent transparent transparent;
	z-index: 10;
}

		.yz-tooltip::after {
			content: '';
			    position: absolute;
			    left: 20px;
			    bottom: -15px;
			    width: 0;
			    height: 0;
			    border: 8px solid;
			    border-color: red transparent transparent transparent;
		}

			
			.yz-el-dialog .yz-tooltip.saletooltip {
				display: none;
				border:1px solid  #FF8F9A;
				background-color: #ffe5e7;
				color: #F21C30;
				white-space: nowrap;
				border-radius: 4px;
				
			}
			.yz-el-dialog  .renewButton:hover  .yz-tooltip.saletooltip {
				display:block;
			}
			
			.yz-el-dialog  .renewButton img{
				width: 21px;
				margin-right: 3px;
				
			}
			.renewTime-wrapper {
				padding-bottom: 20px;
				border-bottom: 1px solid #EEEEEE;
				margin-bottom: 50px;
			}
			.autoRenew-wrapper .autoRenewInfo  {
				align-items: center;
				margin-top: 20px;
			}
			.autoRenew-wrapper .autoRenewInfo .title {
				margin-right: 17px;
			}
			
			.autoRenew-wrapper .autoRenewDesc {
				color: #5958F1;
				font-size: 12px;
				margin-top: 9px;
			}
			.el-table th,
			.el-table tr {
				border-top: 1px solid #ebeef5;
			}
			
			

		</style>




	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="serverList-wrapper section">
			<div class="serverList-content-wrapper">
				<div class="serverListNav">
					<span class="nav-item">总览</span>
					<span class="nav-item">云服务器CVM</span>
				</div>
				<div class="form-wrapper">
					<span class="from-title">云服务器 CVM列表</span>
					<div class="button-wrapper  fboxRow">
						<div @click="handleClickCreateNews" :class="{'active': canCreateServer}" class="yzButton newServer">新建</div>
						<div @click="startServer" :class="{'active': selectServerInfo.status && selectServerInfo.status !== 'alive' && selectServerInfo.status !== 'start' && selectServerInfo.status !== 'closing' && selectServerInfo.status !== 'restarting' && selectServerInfo.status !== 'timeout' && selectServerInfo.status !== 'release'}"
						 class="yzButton">启动</div>
						<div @click="restartServer" class="yzButton" :class="{'active': selectServerInfo.status && selectServerInfo.status !== 'closed' && selectServerInfo.status !== 'start' && selectServerInfo.status !== 'closing' && selectServerInfo.status !== 'restarting' && selectServerInfo.status !== 'timeout' && selectServerInfo.status !== 'release' }">重启</div>
						<div @click="closeServer" class="yzButton" :class="{'active': selectServerInfo.status && selectServerInfo.status !== 'closed' && selectServerInfo.status !== 'start' && selectServerInfo.status !== 'closing' && selectServerInfo.status !== 'restarting' && selectServerInfo.status !== 'timeout' && selectServerInfo.status !== 'release'}">关机</div>
						<el-select style="height: 42px;line-height: 42px;" value="更多">
							<el-option :class="{'noClick': !selectServerInfo.status || selectServerInfo.status === 'timeout' && selectServerInfo.status === 'release' }"
							 @click.native="handleClickRenew" label="续费">
							</el-option>
							<el-option :class="{'noClick': !selectServerInfo.status || selectServerInfo.status === 'timeout' && selectServerInfo.status === 'release' }"
							 @click.native="handleClickAutoRenew" label="自动续费">
							</el-option>
						</el-select>
					</div>

					<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">

						<el-table-column label="" width="35">
							<template slot-scope="scope">
								<el-checkbox @change="changeSelectServerIndex(scope.row,$event)" v-model="scope.row.checked"></el-checkbox>
							</template>
						</el-table-column>

						<el-table-column label="实例ID/名称" width="auto">
							<template slot-scope="scope">


								<div style="line-height: 12px;margin-bottom: 5px;" class="ServerId">{{scope.row.id}}</div>
								<div class="ServerName fboxRow">
									<span>{{scope.row.initName}}</span>
									<el-popover class="yzel-popover" placement="top" trigger="manual" v-model="scope.row.popoverVisible">
										<p class="popover-title">编辑实例ID/名称</p>
										<el-form>
											<el-form-item>
												<el-input maxlength="20" v-model="scope.row.name"></el-input>
											</el-form-item>
											<el-form-item>
												<el-button @click="handleClickpopoverConfirm(scope.row)" type="primary" @click="onSubmit" style="height: 36px;background-color: #6462F3;border: none;">确定</el-button>
												<el-button @click="scope.row.popoverVisible = false" style="height: 36px;">取消</el-button>
											</el-form-item>
										</el-form>



										<div slot="reference" class="name-wrapper">
											<i @click="contorlPopverShow(scope.row)" class="icon el-icon-edit"></i>
										</div>
									</el-popover>


								</div>
							</template>

						</el-table-column>
						
						<el-table-column label="实例类型" width="auto">
							<template slot-scope="scope">
								<p>{{scope.row.serverType}}</p>
							</template>
						</el-table-column>
						
						<el-table-column width="auto" prop="node" label="节点" show-overflow-tooltip>
						</el-table-column>

						<el-table-column width="auto" prop="network" label="网络类型" show-overflow-tooltip>
						</el-table-column>


						<el-table-column width="170" label="IP地址" >
							<template slot-scope="scope">
								<p class="mb-10" style="white-space:nowrap ;" v-if="scope.row.publicIp && scope.row.publicIp !== ''">{{scope.row.publicIp}}(公)</p>
								<p style="white-space:nowrap ;" v-if="scope.row.privateIp && scope.row.privateIp !== ''">{{scope.row.privateIp}}(私)</p>
							</template>
						</el-table-column>

						<el-table-column label="配置">
							<template slot-scope="scope">
								<p class="mb-10">{{scope.row.cpu}}核{{scope.row.raw}}G</p>
								<p>{{scope.row.bindWith}}Mbps</p>
							</template>
						</el-table-column>

						<el-table-column label="系统">
							<template slot-scope="scope">
								<img :src="'../img/' + scope.row.systemImg + '.png'" style="width: 22px;">
							</template>
						</el-table-column>

						<el-table-column prop="status" label="状态" width="180" column-key="status" :filters="[{text: '运行中', value: 'alive'}, {text: '已关机', value: 'closed'}, {text: '已过期', value: 'timeout'}, {text: '已释放', value: ''}]"
						 :filter-method="filterHandler">
							<template slot-scope="scope">
								<div v-html="handlestatus(scope.row)"></div>
							</template>
						</el-table-column>

						<el-table-column prop="date" label="到期时间">

						</el-table-column>

						<el-table-column label="操作">
							<template slot-scope="scope">
								<span @click="handleClickManageServer(scope.row)" :class="{'active':scope.row.status !== 'release'}" class="opearButton">管理</span>
							</template>
						</el-table-column>


					</el-table>
						<div class="pagination-wrapper">
						  <div class="total-wrapper">
							  <span class="totalSize">共有 5 条记录</span>
							  <el-select @change="handleSizeChange" v-model="pageInfo.pagesize">
								    <el-option
								      v-for="item in pageOptions"
								      :key="item.value"
								      :label="item.label"
								      :value="item.value">
								    </el-option>
							  </el-select>
						  </div>
						  <el-pagination
							:page-size="pageInfo.pagesize"
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="pageInfo.currentPage"
							layout="prev, pager, next, jumper"
							:total="pageInfo.totalSize">
						  </el-pagination>
						</div>
					
					<el-dialog width="940px" class="yz-el-dialog" :visible.sync="dialogRenewVisible">
						<div slot="title" class="dialog-title">
							续费设置
						</div>
						<div class="dialog-content">
							
							<el-table :data="reNewProductInfo" style="width: 100%">
								<!-- 占位 使用 -->
								<el-table-column width="20" label="">
								</el-table-column>
								<!-- 占位 使用end -->
								
								<el-table-column prop="productType" label="产品名称/类型">
									<template slot-scope="scope">
										<p class="productName">{{scope.row.productName}}</p>
										<p class="productType">{{scope.row.productType}}</p>
										
									</template>
								</el-table-column>
								
								<el-table-column width="300px"  label="具体配置">
									<template slot-scope="scope">
										<div class="fboxRow">
											<div class="detail-info">
												<span class="info-unit">CPU:</span>
												<span class="info-val">{{scope.row.cpu}}核</span>
											</div>
											<div class="detail-info">
												<span class="info-unit">数据盘:</span>
												<span class="info-val">{{scope.row.dataDisk}}G</span>
											</div>
										</div>
										<div class="fboxRow">
											<div class="detail-info">
												<span class="info-unit">内存:</span>
												<span class="info-val">{{scope.row.raw}}G</span>
											</div>
											<div class="detail-info">
												<span class="info-unit">带宽:</span>
												<span class="info-val">{{scope.row.bindWith}}G</span>
											</div>
										</div>
										<div class="fboxRow">
											<div class="detail-info">
												<span class="info-unit">SSD:</span>
												<span class="info-val">{{scope.row.ssd}}G</span>
											</div>
											<div class="detail-info">
												<span class="info-unit">操作系统:</span>
												<span class="info-val">{{scope.row.opearSystem}}</span>
											</div>
										</div>
										<div class="fboxRow">
											<div class="detail-info">
												<span style="min-width: 32px;" class="info-unit">IP:</span>
												<span class="info-val">{{scope.row.ip}}个</span>
											</div>
										</div>
										
									</template>
								</el-table-column>
								<el-table-column prop="ipaddress" label="IP地址">
								</el-table-column>
								<el-table-column prop="sumMoney" label="总金额">
								</el-table-column>
								<el-table-column prop="date" label="到期时间">
								</el-table-column>
							</el-table>
							<div class="renewTime-wrapper mt-20">
								<span>续费周期</span>
								<div class="renewButton-wrapper fboxRow mt-20">
									<div :class="{'active': item.value === activeRenewTime}" @click="selectRenewTime(item)" v-for="(item,index) in  renewButtonGroup" class="mr-10 yzButton renewButton">
										<img v-if="item.haveSale" src="../img/sizegift.png" />
										<span>{{item.name}}</span>
										<div v-if="item.haveSale" class="yz-tooltip saletooltip">{{item.saleContext}}</div>
									</div>
								</div>
								
							</div>
							<div class="dialog-button-wrapper fboxRow">
								<div @click="confirmRenew" class="yzButton  confirm">确认</div>
								<div @click="cancelRenew" class="yzButton cancelButton">取消</div>
							</div>
							<div class="dialog-price-wrapper  fboxRow">
								<span class="price-title">续费金额</span>
								<p class="price">
									<span class="price-num">1381.06</span>
									<span class="price-unit">元</span>
								</p>
							</div>
							
						</div>

					</el-dialog>
					
					<el-dialog width="940px" class="yz-el-dialog" :visible.sync="dialogAutoRenewVisible">
						<div slot="title" class="dialog-title">
							设置自动续费
						</div>
						<div class="dialog-content">
							
							<el-table :data="reNewProductInfo" style="width: 100%">
								<!-- 占位 使用 -->
								<el-table-column width="20" label="">
								</el-table-column>
								<!-- 占位 使用end -->
								
								<el-table-column prop="productType" label="产品名称/类型">
									<template slot-scope="scope">
										<p class="productName">{{scope.row.productName}}</p>
										
										<p class="productType">{{scope.row.productType}}</p>
										
									</template>
								</el-table-column>
								
								<el-table-column width="300px"  label="具体配置">
									<template slot-scope="scope">
										<div class="fboxRow">
											<div class="detail-info">
												<span class="info-unit">CPU:</span>
												<span class="info-val">{{scope.row.cpu}}核</span>
											</div>
											<div class="detail-info">
												<span class="info-unit">数据盘:</span>
												<span class="info-val">{{scope.row.dataDisk}}G</span>
											</div>
										</div>
										<div class="fboxRow">
											<div class="detail-info">
												<span class="info-unit">内存:</span>
												<span class="info-val">{{scope.row.raw}}G</span>
											</div>
											<div class="detail-info">
												<span class="info-unit">带宽:</span>
												<span class="info-val">{{scope.row.bindWith}}G</span>
											</div>
										</div>
										<div class="fboxRow">
											<div class="detail-info">
												<span class="info-unit">SSD:</span>
												<span class="info-val">{{scope.row.ssd}}G</span>
											</div>
											<div class="detail-info">
												<span class="info-unit">操作系统:</span>
												<span class="info-val">{{scope.row.opearSystem}}</span>
											</div>
										</div>
										<div class="fboxRow">
											<div class="detail-info">
												<span style="min-width: 32px;" class="info-unit">IP:</span>
												<span class="info-val">{{scope.row.ip}}个</span>
											</div>
										</div>
										
									</template>
								</el-table-column>
								<el-table-column prop="ipaddress" label="IP地址">
								</el-table-column>
								<el-table-column prop="sumMoney" label="总金额">
								</el-table-column>
								<el-table-column prop="date" label="到期时间">
								</el-table-column>
							</el-table>
							<div class="autoRenew-wrapper">
								<div class="autoRenewInfo fboxRow">
									<span class="title">续费时间：</span>
									<el-select style="width: 178px;color: #777777;" v-model="activeAutoRenewTime">
										<el-option v-for="(item,index) in autoRenewTimeGroup" :key="index" :label="item.name" :value="item.value" >
										</el-option>
									</el-select>
								</div>
								<p class="autoRenewDesc">注：选定续费时间后，将会在指定时间凌晨自动从余额扣款，如果余额不足，将会自动为您生成续费订单，我们将通过短信和邮箱的形式提醒您</p>
							</div>
							<div class="renewTime-wrapper mt-20">
								<span>续费周期</span>
								<div class="renewButton-wrapper fboxRow mt-20">
									<div :class="{'active': item.value === activeRenewTime}" @click="selectRenewTime(item)" v-for="(item,index) in  renewButtonGroup" class="mr-10 yzButton renewButton">
										<img v-if="item.haveSale" src="../img/sizegift.png" />
										<span>{{item.name}}</span>
										<div v-if="item.haveSale" class="yz-tooltip saletooltip">{{item.saleContext}}</div>
									</div>
								</div>
								
							</div>
							<div class="dialog-button-wrapper fboxRow">
								<div @click="confirmautoRenew" class="yzButton  confirm">确认</div>
								<div @click="cancelautoRenew" class="yzButton cancelButton">取消</div>
							</div>
							<div class="dialog-price-wrapper  fboxRow">
								<span class="price-title">续费金额</span>
								<p class="price">
									<span class="price-num">1381.06</span>
									<span class="price-unit">元</span>
								</p>
							</div>
							
						</div>
					
					</el-dialog>
					

				</div>
			</div>


		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.serverList-wrapper',
				data: function() {
					return {
						dialogAutoRenewVisible:false, // 自动续费弹框是否显示 默认为false
						dialogRenewVisible: false, // 续费弹框是否 显示 默认为false
						canCreateServer: true, // 是否可以创建服务器  默认为可以创建
						// 选中服务器信息
						selectServerInfo: {},


						// 表格数据
						tableData: [{
							checked: false,
							id: '12345738',
							name: '佐助', // 修改时 变化的
							initName: '佐助', // 初始的
							node: '美国',
							network: '专有网络',
							publicIp: '129.28.148.213',
							privateIp: '22.23.118.213',
							popoverVisible: false,
							cpu: 1, // cpu 核心
							raw: 1, // 内存  G
							bindWith: 1, // 带宽  Mbps
							systemImg: 'windows',
							status: 'alive',
							date: '2020-12-03',
							serverType:'内存型'
							
						}, {
							checked: false,
							id: '831393919',
							name: '鸣人',
							initName: '鸣人', // 初始的
							node: '美国',
							network: '专有网络',
							publicIp: '129.28.148.213',
							privateIp: '22.23.118.213',
							popoverVisible: false,
							cpu: 1, // cpu 核心
							raw: 1, // 内存  G
							bindWith: 1, // 带宽  Mbps
							systemImg: 'windows',
							status: 'start',
							date: '2020-12-03',
							serverType:'内存型'
						}, {
							checked: false,
							id: '256567',
							name: '我爱罗',
							initName: '我爱罗', // 初始的
							node: '美国',
							network: '专有网络',
							publicIp: '129.28.148.213',
							popoverVisible: false,
							cpu: 1, // cpu 核心
							raw: 1, // 内存  G
							bindWith: 1, // 带宽  Mbps
							systemImg: 'windows',
							date: '2020-12-03',
							serverType:'计算型',
							status: 'closing' //  运行中 alive   启动中 start   关机中 closing;  已关机  closed;   timeout  已过期
						}, {
							checked: false,
							id: '1839191',
							name: '杀生丸',
							initName: '杀生丸', // 初始的
							node: '美国',
							network: '专有网络',
							publicIp: '129.28.148.213',
							popoverVisible: false,
							cpu: 1, // cpu 核心
							raw: 1, // 内存  G
							bindWith: 1, // 带宽  Mbps
							systemImg: 'windows',
							date: '2020-12-03',
							serverType:'计算型',
							status: 'closed' //  运行中 alive   启动中 start   关机中 closing;  已关机  closed;   timeout  已过期
						}, {
							checked: false,
							id: '8239191',
							name: '犬夜叉',
							initName: '犬夜叉', // 初始的
							node: '美国',
							network: '专有网络',
							publicIp: '129.28.148.213',
							popoverVisible: false,
							cpu: 1, // cpu 核心
							raw: 1, // 内存  G
							bindWith: 1, // 带宽  Mbps
							systemImg: 'windows',
							date: '2020-12-03',
							serverType:'计算型',
							status: 'timeout' //  运行中 alive   启动中 start   关机中 closing;  已关机  closed;   timeout  已过期
						}, {
							checked: false,
							id: '83919092',
							name: '李洛克',
							initName: '李洛克', // 初始的
							node: '美国',
							network: '专有网络',
							publicIp: '129.28.148.213',
							popoverVisible: false,
							cpu: 1, // cpu 核心
							raw: 1, // 内存  G
							bindWith: 1, // 带宽  Mbps
							systemImg: 'windows',
							date: '2020-12-03',
							serverType:'计算型',
							status: 'timeout' //  运行中 alive   启动中 start   关机中 closing;  已关机  closed;   timeout  已过期
						}, {
							checked: false,
							network: '专有网络',
							node: '美国',
							id: '983919',
							name: '春野樱',
							publicIp: '129.28.148.213',
							initName: '春野樱', // 初始的
							popoverVisible: false,
							cpu: 1, // cpu 核心
							raw: 1, // 内存  G
							bindWith: 1, // 带宽  Mbps
							systemImg: 'windows',
							date: '2020-12-03',
							serverType:'计算型',
							status: 'timeout' //  运行中 alive   启动中 start   关机中 closing;  已关机  closed;   timeout  已过期
						}],
						// 续费产品信息
						reNewProductInfo: [{
							productType:'服务器类型名称',
							productName: '服务器自定义名称',
							cpu:1,
							dataDisk:100,
							raw:2,
							bindWith:2,
							ssd:50,
							opearSystem:'Windows',
							ip:1,
							ipaddress:'192.106.1.120',
							sumMoney:1381.06,
							serverType:'计算型',
							date:'2020-12-04'
						}],
						
						
						activeRenewTime:'year',// 用户选择的续费周期  默认为年
						// 续费周期
						renewButtonGroup:[{
							value:'month',
							name:'1个月',
							haveSale:false, // 是否有优惠
							
						},{
							value:'quarter',
							name:'3个月',
							haveSale:false, // 是否有优惠
						},{
							value:'halfYear',
							name:'6个月',
							haveSale:false, // 是否有优惠
						},{
							value:'year',
							name:'1年',
							haveSale:true, // 是否有优惠
							saleContext:'立即优惠1个月费用'
						},{
							value:'doubleYear',
							name:'2年',
							haveSale:true, // 是否有优惠
							saleContext:'立即优惠2个月费用'
						},{
							value:'threeYear',
							name:'3年',
							haveSale:true, // 是否有优惠
							saleContext:'立即优惠3个月费用'
						}],
						// 用户选择的
						activeAutoRenewTime:'beforeTime10',
						
						// 自动续费周期组
						autoRenewTimeGroup:[{
							value:'beforeTime10',
							name:'到期前10天',
							haveSale:false, // 是否有优惠
						},{
							value:'beforeTime15',
							name:'到期前15天',
							haveSale:false, // 是否有优惠
						},{
							value:'beforeTime20',
							name:'到期前20天',
							haveSale:false, // 是否有优惠
						}],
						// 分页信息
						pageInfo: {
							pagesize: 8,
							currentPage:1,
							totalSize: 41
						},
						pageOptions: [{
						  value:  6,
						  label: '6条/页'
						}, {
						  value:  8,
						  label: '8条/页'
						},{
						  value:  10,
						  label: '10条/页'
						}],
						

					}
				},

				methods: {
					// 解绑云主机
				handleClickUntieCloud:_throttle(function(row) {
					console.log('解绑云主机')
				}),
				handleClickConfigRuler:function(row) {
					console.log('')
				},
					
				  handleSizeChange:function(e) {
					console.log(e)
				  },
				  handleCurrentChange:function(val) {
					console.log('当前页为xxxxx')
				  },
					
					// 确认自动续费的方法
					confirmautoRenew:_throttle(function() {
						console.log('确认自动续费')
						this.dialogAutoRenewVisible = false
					}),
					// 关闭自动续费弹窗的方法
					cancelautoRenew:_throttle(function() {
						this.dialogAutoRenewVisible = false
					}),
					
					// 确认续费的方法
					confirmRenew:_throttle(function() {
						console.log('确认续费的方法')
						this.dialogRenewVisible =  false
					}),
					// 关闭续费弹窗的方法
					cancelRenew: _throttle(function() {
						this.dialogRenewVisible =  false
					}),
					
					// 选择续费周期的方法
					selectRenewTime:_throttle(function(item) {
						this.activeRenewTime = item.value
						console.log('选择周期',item)
					}),
					
					// 点击续费
					handleClickRenew: _throttle(function() {

						if (!this.selectServerInfo.status || this.selectServerInfo.status === 'timeout' && this.selectServerInfo.status ===
							'release') {
							return
						}
						this.dialogRenewVisible = true
						console.log('续费')

					}),
					// 点击自动续费
					handleClickAutoRenew:_throttle( function() {
						if (!this.selectServerInfo.status || this.selectServerInfo.status === 'timeout' && this.selectServerInfo.status ===
							'release') {
							return
						}
						this.dialogAutoRenewVisible = true
						console.log('自动续费')
					}),

					// 控制popver的显示
					contorlPopverShow: function(row) {
						if (row.popoverVisible) {
							row.popoverVisible = false
						} else {
							this.tableData.forEach(function(item) {
								item.popoverVisible = false
							})
							row.popoverVisible = true
						}
					},

					// 启动服务器
					startServer:_throttle( function() {
						if (this.selectServerInfo.status && this.selectServerInfo.status !== 'alive' && this.selectServerInfo.status !==
							'start' && this.selectServerInfo.status !== 'closing' && this.selectServerInfo.status !== 'restarting' &&
							this.selectServerInfo.status !== 'timeout' && this.selectServerInfo.status !== 'release') {
							console.log('启动服务器')
						}
					}),
					// 重启服务器
					restartServer: _throttle(function() {
						if (this.selectServerInfo.status && this.selectServerInfo.status !== 'closed' && this.selectServerInfo.status !==
							'start' && this.selectServerInfo.status !== 'closing' && this.selectServerInfo.status !== 'restarting' &&
							this.selectServerInfo.status !== 'timeout' && this.selectServerInfo.status !== 'release') {
							console.log('重启服务器')
						}
					}),
					// 关闭服务器
					closeServer: _throttle(function() {
						if (this.selectServerInfo.status && this.selectServerInfo.status !== 'closed' && this.selectServerInfo.status !==
							'start' && this.selectServerInfo.status !== 'closing' && this.selectServerInfo.status !== 'restarting' &&
							this.selectServerInfo.status !== 'timeout' && this.selectServerInfo.status !== 'release') {
							console.log('关闭服务器')
						}
					}),

					// 点击新建服务器
					handleClickCreateNews: _throttle(function() {
						if (!this.canCreateServer) {
							return
						}

						console.log('新建服务器')

					}),

					// 改变云服务器index
					changeSelectServerIndex: function(row, val) {
						if (val === true) {
							this.tableData.forEach(function(item) {

								if (item.id === row.id) {
									return
								}
								item.checked = false
							})

							// 选中云服务器信息赋值
							this.selectServerInfo = row
							console.log(this.selectServerInfo)

						} else {
							// 初始化选中信息
							this.selectServerInfo = {}
						}
						// 是否有选中机器
						let bool = this.tableData.every(function(item) {
							return item.checked === false
						})

						this.canCreateServer = bool


					},

					//点击管理服务器按钮
					handleClickManageServer: function(row) {
						// 释放状态不可点击
						if (row.status === 'release') {
							return
						}

						console.log('进入详情')

					},


					//处理状态
					handlestatus: function(row) {
						//  运行中 alive   启动中 start   关机中 closing;  已关机  closed;   timeout  已过期; 重启中 restarting；释放 release；
						switch (row.status) {
							case 'alive':
								return '<p style="color:#3FBF70">运行中</p>'
							case 'start':
								return '<div style="color:#6462F3"><span >启动中</span><i class="icon el-icon-loading"></i></div>'
							case 'closing':
								return '<div style="color:#FF9416"><span >关机中</span><i class="icon el-icon-loading"></i></div>'
							case 'closed':
								return '<p >已关机</p>'
							case 'timeout':
								return '<p style="color:#F21C30">已过期</p>'
							case 'restarting':
								return '<div style="color:#6462F3"><span >重启中</span><i class="icon el-icon-loading"></i></div>'
							case 'release':
								return '<p>已释放</p>'
							default:
								break;
						}

					},
					// 状态筛选方法 
					filterHandler: function(value, row, column) {
						const property = column['property'];
						return row[property] === value;
					},

					// 点击 popover框上的确定按钮
					handleClickpopoverConfirm: _throttle(function(row) {
						row.popoverVisible = false
						// 这里本来应该为请求后台数据  赋值
						row.initName = row.name
					}),
					onSubmit: function() {
						console.log('submit!');
					},

					toggleSelection: function(rows) {
						if (rows) {
							let that = this
							rows.forEach(function(row) {
								that.$refs.multipleTable.toggleRowSelection(row);
							});


						} else {
							this.$refs.multipleTable.clearSelection();
						}
					},
					handleSelectionChange: function(val) {
						this.multipleSelection = val;
					}
				},
				mounted: function() {

				}

			})
		</script>
	</body>
</html>
